<template>
	<view>
		<!-- 导航栏(全部使用自定义导航栏)，因为内置导航栏在ios端有bug -->
		<!-- 自定义组件：系统状态栏和导航栏 -->
		<statusBar :sousuo="true"></statusBar>
		
		<!-- 轮播图组件 -->
		<!-- 用一个盒子将轮播图组件包裹起来，并设置内边距 -->
		<!-- 这里px-3 py-2可根据实际需求来灵活调节，不必封装进组件。 -->
		<view class="px-3 py-2">
			<!-- 将轮播图封装成自定义组件，组件内的部分将被插进组件定义处的slot标签内 -->
			<swiperDot :info="swipers" :cur="cur">
				<!-- indicator-dots属性控制显示轮播图下方的三个点，
					 autoplay属性控制自动播放，
					 interval属性控制轮播的时间间隔，duration属性控制一次轮播动画的持续时间
					 circular属性实现了轮播时的衔接效果 -->
				<swiper
				circular :autoplay="true" :interval="2500"
				:duration="400" style="height: 345rpx;"
				class="rounded-lg fix-rad-bug"
				@change="swiperChange">
					<swiper-item v-for="(item, index) in swipers" :key="index"><image :src="item.src" mode="aspectFill" style="height:345rpx;"></image></swiper-item>
				</swiper>
			</swiperDot>
		</view>

		<!-- 渲染卡片1 -->
		<card :title="'为你推荐'">
			<view class="flex flex-bet flex-wrap">
				<view
				class="border bg-white my-1d5 rounded-lg"
				v-for="(item,index) in list1" :key=index
				style="width: 328rpx; height: 328rpx;">
					<!-- 图片部分 -->
					<view class="position-relative" style="height: 205rpx;">
						<image :src="item.src" class="bg-success w-100 rounded-top-lg" style="height: 100%;"></image>
						<!-- 图片底部播放数和弹幕数 -->
						<view
							class="position-absolute bottom-0 left-0 right-0 flex text-white pl-1d5"
							style="height: 50rpx; background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));"
						>
							<view class="flex align-center flex-5 font-small">
								<!-- 播放数图标 -->
								<view class="iconfont icon-bofangshu"></view>
								<!-- 播放数 -->
								<text class="ml-0d8">{{item.bofangshu}}</text>
								<!-- 弹幕数图标 -->
								<view class="iconfont icon-danmushu ml-2"></view>
								<!-- 弹幕数 -->
								<text class="ml-0d8">{{item.danmushu}}</text>
							</view>
						</view>
					</view>

					<!-- 标题和标签部分 -->
					<view class="bs px-1d5 w-100" style="height: 110rpx;">
						<!-- 标题部分 -->
						<view class="mt-1d5 text-ellipsis-2 font-small" style="height: 56rpx;line-height: 1.4;">
							{{item.title}}
						</view>
						<!-- 标签部分 -->
						<view class="flex align-center" style="color: #BCBCBC;">
							<view class="flex-4 text-ellipsis-1 font-small">{{item.tag}}</view>
							<!-- 三个点 -->
							<view class="flex flex-1 justify-end">
								<view class="iconfont icon-diandiandianshu font-md"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</card>

		<!-- 渲染卡片2 -->
		<card :title="'为你推荐'">
			<view class="flex flex-bet flex-wrap">
				<view
				class="my-1d5 rounded-lg"
				v-for="(item,index) in list2" :key=index
				style="width: 220rpx; height: 380rpx;background-color: #F3F3F3;">
					<!-- 图片部分 -->
					<view class="position-relative" style="height: 308rpx;">
						<image :src="item.src" class="bg-success w-100 rounded-lg" style="height: 100%;"></image>
						<!-- 图片底部播放数和弹幕数 -->
						<view
							class="position-absolute bottom-0 left-0 right-0 flex text-white pl-1d5 rounded-bottom-lg"
							style="height: 50rpx; background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));">
							<view class="flex align-center font-small">
								<!-- 播放数图标 -->
								<view class="iconfont icon-bofangshu"></view>
								<!-- 播放数 -->
								<text class="ml-0d8 mt-0d5">{{item.bofangshu}}</text>
							</view>
						</view>
					</view>

					<!-- 标题部分 -->
					<view class="mt-1 text-ellipsis-2 font lh" style="height: 72rpx;color: #212221;">{{item.title}}</view>


				</view>
			</view>
		</card>

		<!-- 渲染卡片3 -->
		<card :title="'为你推荐'">
			<view
			v-for="(item,index) in list3" :key=index
			class="w-100 flex flex-bet flex-wrap align-center" style="height: 207rpx;">
				<!-- 图片部分 -->
				<image :src="item.src" class="rounded-lg" style="width: 297.7rpx;height: 170rpx;"></image>
				<!-- 视频介绍部分 -->
				<view style="width: 376.7rpx;height: 170rpx;">
					<!-- 标题 -->
					<view class="w-100 text-ellipsis-2 font" style="height: 72rpx;color: #212221;line-height: 1.3;">{{item.title}}</view>
					<!-- 时间，播放数和三个点 -->
					<view class="mt-1d5" style="width: 100%;height: 82rpx;color: #BCBCBC;line-height: 1;">
						<!-- 时间 -->
						<text class="flex align-center w-100" style="height: 41rpx;">{{item.time}}</text>
						<!-- 播放数 -->
						<view class="flex align-center">
							<view class="flex align-center flex-4" style="height: 41rpx;">
								<!-- 播放数图标 -->
								<view class="iconfont icon-bofangshu"></view>
								<!-- 播放数 -->
								<text class="ml-0d8" style="width: 130rpx;">{{item.bofangshu}}</text>
								<!-- 弹幕数图标 -->
								<view class="iconfont icon-danmushu ml-1"></view>
								<!-- 弹幕数 -->
								<text class="ml-0d8">{{item.danmushu}}</text>
							</view>
							<!-- 三个点 -->
							<view class="flex flex-1 justify-end">
								<view class="iconfont icon-diandiandianshu font-md"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- display: inline-block;作用是让这里的分割线突破父级元素的宽度限制 -->
				<view style="display: inline-block;">
					<!-- 分割线 -->
					<view class="divid-line-1"></view>
				</view>
			</view>
		</card>











		<!-- #2( animate动画库使用示例 -->
		<!-- hover-class是点击这个元素后呈现的样式 -->

		<!-- <view class="flex justify-center">
			<view class="iconfont iconxiaoxi text-danger font-max"
			   hover-class="animate-init animate__animated animate__rubberBand">
			</view>
		</view> -->

		<!-- #2) -->

		<!-- #1( free（高频）样式库使用示例 -->
		<!--<view class="flex fixed-top text-white">
			<view class="flex-1 flex justify-center bg-success font-lg">1</view>
			<view class="flex-2 flex justify-center bg-danger font-lg">2</view>
			<view class="flex-3 flex justify-center bg-warning font-lg">3</view>
		</view>-->
		<!-- #1) -->
		<u-tabbar v-model="current" :list="tabbarList" :inactive-color="'#333C4E'" :active-color="'#f9749a'"></u-tabbar>
	</view>
</template>


<script>
// 引入自定义组件
import card from '@/components/common/card.vue'
import swiperDot from '@/components/common/swiper-dot.vue'
import statusBar from '@/components/common/statusBar.vue'

export default {
	// 注册自定义组件
	components:{
		swiperDot,
		card,
		statusBar
	},
	data() {
		return {
			// 轮播图中每个滑块的信息
			swipers: [
				{
					src: '/static/demo/swiper/0.png',
					title: '史上容量最大的游戏 300GB的游戏长什么样？'
				},
				{
					src: '/static/demo/swiper/0.png',
					title: '【英雄联盟】2018全球总决赛MV—登峰造极境 Rise'
				},
				{
					src: '/static/demo/swiper/0.png',
					title: '电影最TOP 100：永远的喜剧之王！星爷周星驰电影全盘点'
				}
			],
			list1: [
				{
					src: '/static/demo/list1/0.jpg',
					title: '【阿牛】双十一大幕降下，回头看看借呗、花呗和美国次贷危机！',
					tag:'金融',
					bofangshu: '31.5万',
					danmushu: '2588'
				},
				{
					src: '/static/demo/list1/0.jpg',
					title: '【全站最离谱】马保国XP系统',
					tag:'搞笑 · 鬼畜',
					bofangshu: '566万',
					danmushu: '3828'
				},
				{
					src: '/static/demo/list1/0.jpg',
					title: '油管六百万播放的碧梨热单《lovely》翻唱歌手Alaina来B站啦！',
					tag:'Alaina Castillo Says Hi to Bilibili',
					bofangshu: '100.7万',
					danmushu: '1398'
				},
				{
					src: '/static/demo/list1/0.jpg',
					title: '当代大学生体质（部分）',
					tag:'搞笑 · 逗比',
					bofangshu: '187.4万',
					danmushu: '332'
				},
				{
					src: '/static/demo/list1/0.jpg',
					title: '猫：走路，我们是认真的！',
					tag:'搞笑 · 猫咪',
					bofangshu: '405.2万',
					danmushu: '3922'
				},
				{
					src: '/static/demo/list1/0.jpg',
					title: '再见！川建国！Time to say Goodbye !',
					tag:'美国大选',
					bofangshu: '243.4万',
					danmushu: '1.5万'
				}
			],
			list2: [
				{
					src: '/static/demo/list2/0.png',
					title: '姜子牙',
					bofangshu: '969.9万'
				},
				{
					src: '/static/demo/list2/0.png',
					title: '猛禽小队和哈莉·奎茵',
					bofangshu: '372.3万'
				},
				{
					src: '/static/demo/list2/0.png',
					title: '巴黎两日情',
					bofangshu: '3.8万'
				},
				{
					src: '/static/demo/list2/0.png',
					title: '日落黄沙',
					bofangshu: '10.7万'
				},
				{
					src: '/static/demo/list2/0.png',
					title: '霸王花',
					bofangshu: '36.4万'
				},
				{
					src: '/static/demo/list2/0.png',
					title: '粉红豹2',
					bofangshu: '41.2万'
				}
			],
			list3: [
				{
					src: '/static/demo/list3/0.jpg',
					title: '探秘美国食物银行，美国真的很多人没饱饭吃吗？',
					time: '昨天 18:11',
					bofangshu: '99.5万',
					danmushu: '1325'
				},
				{
					src: '/static/demo/list3/0.jpg',
					title: '航天基地的食堂，到底吃什么？牛肉汤可以不要粉丝只要肉！',
					time: '昨天 17:15',
					bofangshu: '24.8万',
					danmushu: '254'
				},
				{
					src: '/static/demo/list3/0.jpg',
					title: '被历史误解了2000多年的千古一帝',
					time: '昨天 17:10',
					bofangshu: '63万',
					danmushu: '1.7万'
				},
				{
					src: '/static/demo/list3/0.jpg',
					title: '华农兄弟：兄弟的羊跑出来了，幸好遇到我们，不然就被别人煮了',
					time: '昨天 16:25',
					bofangshu: '63.1万',
					danmushu: '1262'
				},
				{
					src: '/static/demo/list3/0.jpg',
					title: '她是我年少惊艳，只一眼 便沦陷',
					time: '昨天 15:48',
					bofangshu: '90.7万',
					danmushu: '5.2万'
				},
				{
					src: '/static/demo/list3/0.jpg',
					title: '这才是iPhone的最强功能，不接受反驳',
					time: '昨天 15:42',
					bofangshu: '126.1万',
					danmushu: '1058'
				}
			],
			// 当前滑块的索引
			cur: 0,
			current:0,
			tabbarList: [{
				// 非凸起按钮未激活的图标，可以是uView内置图标名或自定义扩展图标库的图标
				// 或者png图标的【绝对路径】，建议尺寸为80px * 80px
				// 如果是中间凸起的按钮，只能使用图片，且建议为120px * 120px的png图片
				// 路径需要以"/"开头
				iconPath: "/static/tabbar/find.png",
				// 激活(选中)的图标，同上
				selectedIconPath: "/static/tabbar/findSelected.png",
				// 显示的提示文字
				text: '首页',
				// 红色角标显示的数字，如果需要移除角标，配置此参数为0即可
				count: 0,
				// 如果配置此值为true，那么角标将会以红点的形式显示
				isDot: false,
				// 如果使用自定义扩展的图标库字体，需配置此值为true
				// 自定义字体图标库教程：https://www.uviewui.com/guide/customIcon.html
				customIcon: false,
				// 如果是凸起按钮项，需配置此值为true
				midButton: false,
				// 点击某一个item时，跳转的路径，此路径必须是pagees.json中tabBar字段中定义的路径
				pagePath: '/pages/index/index', // 1.5.6新增，路径需要以"/"开头
			},
			{
				iconPath: "/static/tabbar/class.png",
				selectedIconPath: "/static/tabbar/classSelected.png",
				text: '分类',
				count: 0,
				isDot: false,
				customIcon: false,
				midButton: false,
				pagePath: '/pages/class/class',
			},
			{
				iconPath: "/static/tabbar/my.png",
				selectedIconPath: "/static/tabbar/mySelected.png",
				text: '我的',
				count: 0,
				isDot: false,
				customIcon: false,
				midButton: false,
				pagePath: '/pages/my/my',
			}]
		}
	},
	onLoad() {},
	// 监听原生标题栏搜索输入框点击事件
	onNavigationBarSearchInputClicked() {
		console.log('搜索输入框被点击了');
	},
	// 监听原生标题栏按钮点击事件。如果有多个按钮，可以给函数传参
	onNavigationBarButtonTap() {
		console.log('按钮被点击了');
	},
	methods: {
		swiperChange(e) {
			this.cur = e.detail.current;
		}
	}
};
</script>

<style>
	page {
		background-color: #F3F3F3!important;
	}
	
</style>
